---
topTitle: Forms
title: Form General
icon: fa fa-pencil
styleName: alterne

cdncss:
- //cdnjs.cloudflare.com/ajax/libs/Uniform.js/2.1.2/themes/default/css/uniform.default.min.css
- //cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css
- //cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.3/jquery.tagsinput.css
- //cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css
- https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css
- //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker3.min.css
- //cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.0.1/css/bootstrap-colorpicker.min.css
- https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css
cdnjs:
- https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js
- //cdnjs.cloudflare.com/ajax/libs/Uniform.js/2.1.2/jquery.uniform.min.js
- //cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js
- //cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.3/jquery.tagsinput.min.js
- //cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.17/jquery.autosize.min.js
- //cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js
- https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js
- //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.min.js
- //cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.0.1/js/bootstrap-colorpicker.min.js
- https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js

stylesheets:
- lib/inputlimiter/jquery.inputlimiter.css
- lib/bootstrap-daterangepicker/daterangepicker-bs3.css
javascripts:
- lib/inputlimiter/jquery.inputlimiter.js
- lib/validVal/js/jquery.validVal.min.js
- lib/bootstrap-daterangepicker/daterangepicker.js
scripts:
- Metis.formGeneral()
---
<!--BEGIN INPUT TEXT FIELDS-->
<div class="row">
<div class="col-lg-6">
    <div class="box dark">
        <header>
            <div class="icons"><i class="fa fa-edit"></i></div>
            <h5>Input Text Fields</h5>
            <!-- .toolbar -->
            {{> toolbar}}
            <!-- /.toolbar -->
        </header>
        <div id="div-1" class="body">
            <form class="form-horizontal">

                <div class="form-group">
                    <label for="text1" class="control-label col-lg-4">Normal Input Field</label>

                    <div class="col-lg-8">
                        <input type="text" id="text1" placeholder="Email" class="form-control">
                    </div>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label for="pass1" class="control-label col-lg-4">Password Field</label>

                    <div class="col-lg-8">
                        <input class="form-control" type="password" id="pass1"
                               data-original-title="Please use your secure password" data-placement="top"/>
                    </div>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-label col-lg-4">Read only input</label>

                    <div class="col-lg-8">
                        <input type="text" value="read only" readonly class="form-control">
                    </div>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label class="control-label col-lg-4">Disabled input</label>

                    <div class="col-lg-8">
                        <input type="text" value="disabled" disabled class="form-control">
                    </div>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label for="text2" class="control-label col-lg-4">With Placeholder</label>

                    <div class="col-lg-8">
                        <input type="text" id="text2" placeholder="placeholder text" class="form-control">
                    </div>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label for="limiter" class="control-label col-lg-4">Input limiter</label>

                    <div class="col-lg-8">
                        <textarea id="limiter" class="form-control"></textarea>
                    </div>
                </div>
                <!-- /.row -->

                <div class="form-group">
                    <label for="text4" class="control-label col-lg-4">Default Textarea</label>

                    <div class="col-lg-8">
                        <textarea id="text4" class="form-control"></textarea>
                    </div>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label for="autosize" class="control-label col-lg-4">Textarea With Autosize</label>

                    <div class="col-lg-8">
                        <textarea id="autosize" class="form-control"></textarea>
                    </div>
                </div>
                <!-- /.form-group -->

                <div class="form-group">
                    <label for="tags" class="control-label col-lg-4">Tags</label>

                    <div class="col-lg-8">
                        <input name="tags" id="tags" value="foo,bar,baz" class="form-control">
                    </div>
                </div>
                <!-- /.form-group -->
            </form>
        </div>
    </div>
</div>

<!--END TEXT INPUT FIELD-->

<!--BEGIN SELECT        -->

<div class="col-lg-6">
<div class="box inverse">
<header>
    <div class="icons"><i class="fa fa-th-large"></i></div>
    <h5>Selects</h5>

    <!-- .toolbar -->
    {{> toolbar}}
    <!-- /.toolbar -->

</header>
<div id="div-2" class="body">
<form class="form-horizontal">

<div class="form-group">
    <label class="control-label col-lg-4">Select Dropdown</label>

    <div class="col-lg-8">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>

<div class="form-group">
<label class="control-label col-lg-4">Select with search</label>

<div class="col-lg-8">
  <select data-placeholder="Choose a Country..." class="form-control chzn-select" tabindex="2">
    {{> country-option-list}}
  </select>
</div>
</div>

<div class="form-group">
    <label class="control-label col-lg-4">Multiple select</label>

    <div class="col-lg-8">
        <select multiple="multiple" size="5" class="form-control">
            <option selected>1</option>
            <option selected>2</option>
            <option>3</option>
            <option selected>4</option>
            <option>5</option>
        </select>
    </div>
</div>

<div class="form-group">
<label class="control-label col-lg-4">Multiple with search</label>

<div class="col-lg-8">
  <select data-placeholder="Choose a Country..." class="form-control chzn-select" multiple tabindex="4">
    {{> country-option-list}}
  </select>
</div>
</div>

<div class="form-group">
    <label class="control-label col-lg-4">Single Select with Groups</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Football Team" class="form-control chzn-select" tabindex="5">
            {{> football-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Multiple Select with Groups</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Football Team" class="form-control chzn-select" multiple tabindex="6">
            {{> football-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Single Select</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Type of Bear" class="form-control chzn-select" tabindex="7">
            {{> bear-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Multiple Select</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Types of Bear" multiple class="form-control chzn-select" tabindex="8">
            {{> bear-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Multiple Select & Deselect</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Types of Bear" multiple class="form-control chzn-select" id="test_me_paddington" name="test_me_form" tabindex="8">
            {{> bear-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Allow Deselect on Single Selects</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Type of Bear" class="form-control chzn-select-deselect" tabindex="7">
            {{> bear-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Single right to left select</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Type of Bear" class="form-control chzn-select chzn-rtl" tabindex="9">
            {{> bear-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Multiple right to left select</label>

    <div class="col-lg-8">
        <select data-placeholder="Your Favorite Types of Bear" multiple class="form-control chzn-select  chzn-rtl" tabindex="10">
            {{> bear-option-list}}
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">Spinner</label>
    <div class="col-lg-8">
        <input class="form-control" type="number" value="6">
    </div>
</div>

<div class="form-group">
    <label class="control-label col-lg-4">Decimal Spinner</label>
    <div class="col-lg-8">
        <input class="form-control" type="number" step="0.1" value="2.8">
    </div>
</div>

<div class="form-group">
    <label class="control-label col-lg-4">Currency Spinner</label>
    <div class="col-lg-8">
        <input class="form-control" type="number" step="5" value="16">
    </div>
</div>
</form>
</div>
</div>
</div>
<!--END SELECT-->
</div>
<!-- /.row -->


<!-- BEGIN CHECKBOX & RADIO -->
<div class="row">
    <div class="col-lg-6">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-check"></i></div>
                <h5>Checkbox & Radio</h5>

                <div class="toolbar">
                    <input class="uniform" type="checkbox" checked>
                </div>
            </header>
            <div class="body">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label class="control-label col-lg-4">Checkbox</label>

                        <div class="col-lg-8">
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="checkbox" value="option1" checked> Checked checkbox
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="checkbox" value="option2"> Unchecked checkbox
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="checkbox" value="option3" checked disabled> Disabled
                                    checked
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="checkbox" value="option2" disabled> Disabled unchecked
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                    <div class="form-group">
                        <label class="control-label col-lg-4">Radio</label>

                        <div class="col-lg-8">
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="radio" name="optionsRadios" value="option1" checked>Checked
                                    radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="radio" name="optionsRadios" value="option2">Unchecked
                                    radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="radio" name="optionsRadios2" value="option3" checked
                                           disabled>
                                    Disabled checked radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                            <div class="checkbox">
                                <label>
                                    <input class="uniform" type="radio" name="optionsRadios2" value="option4" disabled>
                                    Disabled unchecked radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                        </div>
                    </div>
                    <!-- /.row -->


                    <div class="form-group">
                        <label class="control-label col-lg-4">Basic</label>

                        <div class="col-lg-8">
                            <input class="make-switch" type="checkbox" data-size="mini" checked><br>
                            <input class="make-switch" type="checkbox" data-size="small"><br>
                            <input class="make-switch" type="checkbox" data-size="normal" checked><br>
                            <input class="make-switch" type="checkbox" data-size="large"><br>
                            <input class="make-switch" type="checkbox" data-label-text="BS" checked disabled><br>
                            <input class="make-switch" type="checkbox"><br>
                            <input class="make-switch" type="checkbox" checked><br>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Color</label>

                        <div class="col-lg-8">

                            <input class="make-switch" type="checkbox" data-on-text="1" data-off-text="0" checked><br>
                            <input class="make-switch" type="checkbox" data-on-color="info" data-off-color="success"><br>
                            <input class="make-switch" type="checkbox" data-on-text="osman" data-off-text="nuri" checked><br>
                            <input class="make-switch" type="checkbox" data-on-color="warning" data-off-color="danger"><br>
                            <input class="make-switch" type="checkbox" data-on-text="TRUE" data-off-text="FALSE" checked><br>
                            <input class="make-switch" type="checkbox" data-on-color="default" data-off-color="primary"><br>

                        </div>
                    </div>

                    <!-- /.row -->
                    <!-- /.row -->

                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <h3>Animated Checkbox <small>Thanks http://thecodeplayer.com/</small></h3>
        <div class="checkbox anim-checkbox">
            <input type="checkbox" id="ch1">
            <label for="ch1">Default</label>
        </div>
        <div class="checkbox anim-checkbox">
            <input type="checkbox" id="ch2" class="primary">
            <label for="ch2">Primary</label>
        </div>
        <div class="checkbox anim-checkbox">
            <input type="checkbox" id="ch3" class="success">
            <label for="ch3">Success</label>
        </div>
        <div class="checkbox anim-checkbox">
            <input type="checkbox" id="ch4" class="warning">
            <label for="ch4">Warning</label>
        </div>
        <div class="checkbox anim-checkbox">
            <input type="checkbox" id="ch5" class="danger">
            <label for="ch5">Danger</label>
        </div>
        <div class="checkbox anim-checkbox">
            <input type="checkbox" id="ch6" class="info">
            <label for="ch6">Info</label>
        </div>
    </div>
</div>
<!-- /.row -->
<!-- END CHECKBOX & RADIO -->

<!--BEGIN AUTOMATIC JUMP-->
<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-exchange"></i></div>
                <h5>Automatically jump to the next input-field</h5>
            </header>
            <div class="body">

                <form id="validVal" class="form-inline">
                    <div class="row form-group">
                        <div class="col-lg-4">
                            <input class="form-control autotab" type="text" maxlength="3" tabindex="11">
                        </div>
                        <!-- /.col-lg-4 -->
                        <div class="col-lg-4">
                            <input class="form-control autotab" type="text" maxlength="4" tabindex="12">
                        </div>
                        <!-- /.col-lg-4 -->
                        <div class="col-lg-4">
                            <input class="form-control" type="text" maxlength="5" tabindex="13">
                        </div>
                    </div>
                    <!-- /.row -->
                    <div class="row form-group">
                        <div class="col-lg-6">
                            <select class="form-control autotab" name="tabs1_7" tabindex="14">
                                <option value="one">One</option>
                                <option value="two">Two</option>
                                <option value="three">Three</option>
                            </select>
                        </div>
                        <!-- /.col-lg-6 -->
                        <div class="col-lg-6">
                            <select class="form-control autotab" tabindex="15">
                                <option value="one">One</option>
                                <option value="two">Two</option>
                                <option value="three">Three</option>
                            </select>
                        </div>
                        <!-- /.col-lg-6 -->
                    </div>
                    <!-- /.row -->


                </form>
            </div>
        </div>
    </div>
</div>
<!--END AUTOMATIC JUMP-->


<!--BEGIN MASKED INPUTS-->
<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-bolt"></i></div>
                <h5>Masked Inputs</h5>

                <!-- .toolbar -->
                {{> toolbar}}
                <!-- /.toolbar -->

            </header>
            <div id="div-4" class="body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-lg-3">Date</label>

                        <div class="col-lg-5">
                            <div class="input-group">
                                <input class="form-control" type="text" data-mask="99/99/9999">
                                <span class="input-group-addon">99/99/9999</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Phone</label>

                        <div class="col-lg-5">
                            <div class="input-group">
                                <input class="form-control" type="text" data-mask="(999) 999-9999">
                                <span class="input-group-addon">(999) 999-9999</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Product key</label>

                        <div class="col-lg-5">
                            <div class="input-group">
                                <input class="form-control" type="text" data-mask="a*-999-a999">
                                <span class="input-group-addon">a*-999-a999</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-3">Phone</label>

                        <div class="col-lg-5">
                            <div class="input-group">
                                <input class="form-control" type="text" data-mask="+33 999 999 999">
                                <span class="input-group-addon">+33 999 999 999</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-3">Percent</label>

                        <div class="col-lg-5">
                            <div class="input-group">
                                <input class="form-control" type="text" data-mask="99%">
                                <span class="input-group-addon">99%</span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--END MASKED INPUTS-->

<!-- BEGIN COLOR PICKER -->

<!-- .row -->
<div class="row">
    <!-- .col-lg-6 -->
    <div class="col-lg-12">
        <!-- .box -->
        <div class="box">
            <header>
                <div class="icons">
                    <i class="fa fa-edit"></i>
                </div>
                <h5>Color Picker</h5>

                <!-- .toolbar -->
                {{> toolbar}}
                <!-- /.toolbar -->

            </header>
            <!-- .BODY -->
            <div class="body" id="colorPickerBlock">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label for="cp1" class="control-label col-lg-4">Field with hex format</label>

                        <div class="col-lg-3">
                            <input type="text" class="form-control" value="#8fff00" id="cp1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cp2" class="control-label col-lg-4">Field with the rgba format</label>

                        <div class="col-lg-3">
                            <input type="text" class="form-control" value="rgb(0,194,255,0.78)" id="cp2"
                                   data-color-format="rgba">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cp3" class="control-label col-lg-4">As component</label>

                        <div class="col-lg-3">
                            <div class="input-group color">
                                <input type="text" class="form-control" readonly data-color="rgb(255, 146, 180)"
                                       data-color-format="rgb" id="cp3">
                                <span class="input-group-addon" style="background-color: rgb(255, 146, 180)"><i
                                        class="fa fa-home"></i></span>
                            </div>
                            <!-- /input-group -->
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cp3" class="control-label col-lg-4">Using events to work with the color</label>

                        <div class="col-lg-3">
                            <a href="#" class="btn btn-danger" id="cp4" data-color-format="hex"
                               data-color="rgb(255, 255, 255)">Change background color</a>
                        </div>
                    </div>
                </form>

            </div>
            <!-- /.BODY -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<!-- END COLOR PICKER -->

<!-- BEGIN DATE PICKER -->
<div class="row">
    <!-- .col-lg-12 -->
    <div class="col-lg-12">
        <!-- .box -->
        <div class="box">
            <header>
                <div class="icons">
                    <i class="fa fa-calendar"></i>
                </div>
                <h5>Date Picker</h5>

                <!-- .toolbar -->
                {{> toolbar}}
                <!-- /.toolbar -->

            </header>
            <div id="datePickerBlock" class="body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-lg-4" for="dp1">Field with the format specified via
                            options</label>

                        <div class="col-lg-3">
                            <input type="text" class="form-control" value="02-16-2012" id="dp1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4" for="dp2">Field with the format specified via data
                            tag</label>

                        <div class="col-lg-3">
                            <input type="text" class="form-control" value="02/16/12" data-date-format="mm/dd/yy"
                                   id="dp2">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4" for="dp3">As component</label>

                        <div class="col-lg-3">
                            <div class="input-group input-append date" id="dp3" data-date="12-02-2012"
                                 data-date-format="dd-mm-yyyy">
                                <input class="form-control" type="text" value="12-02-2012" readonly>
                                <span class="input-group-addon add-on"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4" for="dpYears">Start with years viewMode</label>

                        <div class="col-lg-3">
                            <div class="input-group input-append  date" id="dpYears" data-date="12-02-2012"
                                 data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input class="form-control" type="text" value="12-02-2012" readonly>
                                <span class="input-group-addon add-on"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4" for="dpMonths">Limit the view mode to months</label>

                        <div class="col-lg-3">
                            <div class="input-group input-append  date" id="dpMonths" data-date="102/2012"
                                 data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">
                                <input class="form-control" type="text" value="12-02-2012" readonly>
                                <span class="input-group-addon add-on"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- END DATE PICKER -->

<!-- BEGIN DATE RANGE PICKER -->
<!-- .row -->
<div class="row">
    <!-- .col-lg-12 -->
    <div class="col-lg-12">
        <!-- .box -->
        <div class="box">
            <header>
                <div class="icons">
                    <i class="fa fa-calendar"></i>
                </div>
                <h5>Date Range Picker</h5>

                <!-- .toolbar -->
                {{> toolbar}}
                <!-- /.toolbar -->

            </header>
            <!-- .block -->


            <div id="dateRangePickerBlock" class="body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-lg-4" for="reservation">Reservation dates</label>

                        <div class="col-lg-4">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" name="reservation" id="reservation" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4" for="reportrange">Pre-defined Ranges & Callback</label>

                        <div class="col-lg-4">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" class="form-control" value="02-16-2012" id="reportrange">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- /.block -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!--END DATE RANGE PICKER -->

<!-- BEGIN TIME PICKER -->
<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-clock-o"></i></div>
                <h5>Time Picker</h5>
            </header>
            <div class="body">
                <form action="" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-lg-4">Default Timepicker</label>
                        <div class="col-lg-3">
                          <div class='input-group date' id='datetimepicker4'>
                            <input type='text' class="form-control" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                          </span>
                        </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- END TIME PICKER -->

<!-- BEGIN GRID INPUTS-->
<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-th"></i></div>
                <h5>Grid Inputs</h5>

                <!-- .toolbar -->
                {{> toolbar}}
                <!-- /.toolbar -->

            </header>
            <div id="div-5" class="body">
                <form class="">

                    <div class="form-group row">
                        <div class="col-lg-1">
                            <input class="form-control" placeholder=".col-lg-1" type="text">
                        </div>
                        <!-- /.col-lg-1 -->
                        <div class="col-lg-11">
                            <input class="form-control" placeholder=".col-lg-11" type="text">
                        </div>
                        <!-- /.col-lg-11 -->
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-2">
                            <input class="form-control" placeholder=".col-lg-2" type="text">
                        </div>
                        <!-- /.col-lg-2 -->
                        <div class="col-lg-10">
                            <input class="form-control" placeholder=".col-lg-10" type="text">
                        </div>
                        <!-- /.col-lg-10 -->
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <input class="form-control" placeholder=".col-lg-3" type="text">
                        </div>
                        <!-- /.col-lg-3 -->
                        <div class="col-lg-9">
                            <input class="form-control" placeholder=".col-lg-9" type="text">
                        </div>
                        <!-- /.col-lg-9 -->
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <input class="form-control" placeholder=".col-lg-4" type="text">
                        </div>
                        <!-- /.col-lg-4 -->
                        <div class="col-lg-8">
                            <input class="form-control" placeholder=".col-lg-8" type="text">
                        </div>
                        <!-- /.col-lg-8 -->
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-5">
                            <input class="form-control" placeholder=".col-lg-5" type="text">
                        </div>
                        <!-- /.col-lg-5 -->
                        <div class="col-lg-7">
                            <input class="form-control" placeholder=".col-lg-7" type="text">
                        </div>
                        <!-- /.col-lg-7 -->
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-6">
                            <input class="form-control" placeholder=".col-lg-6" type="text">
                        </div>
                        <!-- /.col-lg-6 -->
                        <div class="col-lg-6">
                            <input class="form-control" placeholder=".col-lg-6" type="text">
                        </div>
                        <!-- /.col-lg-6 -->
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4">
                            <input class="form-control" placeholder=".col-lg-4" type="text">
                        </div>
                        <!-- /.col-lg-4 -->
                        <div class="col-lg-4">
                            <input class="form-control" placeholder=".col-lg-4" type="text">
                        </div>
                        <!-- /.col-lg-4 -->
                        <div class="col-lg-4">
                            <input class="form-control" placeholder=".col-lg-4" type="text">
                        </div>
                        <!-- /.col-lg-4 -->
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <input class="form-control" placeholder=".col-lg-3" type="text">
                        </div>
                        <!-- /.col-lg-3 -->
                        <div class="col-lg-4">
                            <input class="form-control" placeholder=".col-lg-4" type="text">
                        </div>
                        <!-- /.col-lg-4 -->
                        <div class="col-lg-5">
                            <input class="form-control" placeholder=".col-lg-5" type="text">
                        </div>
                        <!-- /.col-lg-5 -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--END GRID INPUTS-->
